<template>
	<div style="padding: 20px;">
		<el-row :gutter="10">
			<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
				<!-- <tsStatistic></tsStatistic> -->
				<el-card class="top-card top-card-orange">
					<span style="font-size: 16px;">待处理任务数</span>
					<p>
						<span>{{ countData.pendingNum }}</span>
					</p>
					<div class="right-icon">
						<el-icon style="top: 20%; color: #ff7945;"><ts-icon-pending-task /></el-icon>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
				<el-card class="top-card top-card-green">
					<span style="font-size: 16px;">发起任务数</span>
					<p>
						<span>{{ countData.startendNum }}</span>
					</p>
					<div class="right-icon">
						<el-icon style="top: 20%;"><ts-icon-launch-task /></el-icon>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
				<el-card class="top-card top-card-purple">
					<span style="font-size: 16px;">完成任务数</span>
					<p>
						<span>{{ countData.completedNum }}</span>
					</p>
					<div class="right-icon">
						<el-icon style="top: 20%;color: #565cff;"><el-icon-documentChecked /></el-icon>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
				<el-card class="top-card top-card-blue">
					<span style="font-size: 16px;">我的抄送数</span>
					<p>
						<span>{{ countData.coypNum }}</span>
					</p>
					<div class="right-icon">
						<el-icon style="top: 20%;color: #409EFF;"><el-icon-promotion /></el-icon>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="10">
			<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
				<el-card>
					<template #header>
						<div class="card-header">
							<span>订单数量</span>
							<el-button-group style="float:right;">
								<el-button size="small" @click="getCountSample('year')">
									按年
								</el-button>
								<el-button size="small" :class="{ 'button-active': select }"
									@click="getCountSample('month')">
									按月
								</el-button>
								<el-button size="small" @click="getCountSample('week')">按周</el-button>
								<el-button size="small" @click="getCountSample('day')">按天</el-button>
							</el-button-group>
						</div>
					</template>
					<tsEchart :option="option" height="377px"></tsEchart>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
				<el-card header="我的日程">
					<el-calendar v-model="dataValue" ref="calendar">
						<template #date-cell="{ data }">
							<div style="width:100%;height:100%;position: absolute;top:0;left:0" v-for="item in tripList"
								:key="item" :class="{ 'back': item.planDate == data.day }">
								{{ data.day.split('-').slice(2).join('-') }}
							</div>
							<!-- <div style="width: 100%;">
								1
							</div> -->
						</template>
					</el-calendar>
				</el-card>
			</el-col>
		</el-row>
		<!-- <span class="header">信息中心</span> -->
		<el-card header="信息中心">
			<el-tabs v-model="activeName">
				<el-tab-pane name="first" label="信息列表">
					<el-table :data="tableData" height="200px" @row-click="rowClick">
						<el-table-column prop="name" label="标题" width="400"></el-table-column>
						<el-table-column prop="categoryName" label="信息类型"></el-table-column>
						<el-table-column prop="timeDesc" label="发布时间"></el-table-column>
						<el-table-column label="状态">
							<template #default="scope">
								<el-tag :type="scope.row.readStatus == '1' ? 'success' : 'warning'">{{
									scope.row.readStatusName
								}}</el-tag>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination style="margin-top: 10px;" small="true" :total="tableRows" v-model:page-size="pageSize"
						v-model:current-page="pageNo" @current-change="pageChange" @size-change="handleSizeChange"
						layout="jumper,total,sizes,prev, pager, next,">
					</el-pagination>
				</el-tab-pane>
			</el-tabs>
		</el-card>
		<el-dialog v-model="dialogVisible" width="60%" align-center @close="readInfo">
			<template #header="{ close, titleId, titleClass }">
				<div class="header">
					<span :id="titleId" :class="titleClass" style="text-align: center;">{{ form.name }}</span>
					<span class="subTitle">{{ form.subtitle }}</span>
					<span style="color:#9195a3;text-align: center;">{{ form.effectDateTime }}</span>
					<el-icon class="el-icon--left" @click="close">
						<CircleCloseFilled />
					</el-icon>
				</div>
			</template>
			<el-scrollbar height="650">
				<div v-html="form.remark"></div>
			</el-scrollbar>
			<template #footer>
				<el-button type="primary" @click="readInfo">
					已读
				</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import tsEchart from '@/components/scEcharts';
import tsStatistic from './commpoent/statistic.vue'
import Api from '@/api/model/system.js'
import flowApi from '@/api/model/workflow.js'
import authApi from '@/api/model/auth.js'
import tool from '@/utils/tool.js';
import { ElNotification } from 'element-plus';
import { useRoute, useRouter } from 'vue-router'
import time from '@/utils/time'
import trip from '@/api/model/trip';
const activeName = ref('first')
const select = ref(true)
const countData = ref({
})
const calendar = ref(null)
const tripList = ref([])
const option = reactive({
	title: {
		text: '',
		subtext: '基础柱状图',
	},
	grid: {
		top: '80px'
	},
	tooltip: {
		trigger: 'axis'
	},
	xAxis: {
		type: 'category',
		data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
	},
	yAxis: {
		type: 'value'
	},
	series: [{
		data: [120, 200, 150, 80, 70, 110, 130],
		type: 'bar',
		barWidth: '15px',
	}]
})
const tableRows = ref(0)
const tableData = ref([])
const pageNo = ref(1)
const pageSize = ref(10)
const id = ref()
const dataValue = ref(new Date())
const form = ref({})
const dialogVisible = ref(false)
watch(dataValue, (newValue, oldValue) => {
	if (newValue.getMonth() !== oldValue.getMonth()) {
		getTripPlans(time.formatDate(newValue))
	}

})
onMounted(() => {
	getInit()
	getTripPlans(time.formatDate(dataValue.value))
	getCountSample('month')
})
const getInit = async () => {
	let params = {
		pageNo: pageNo.value,
		pageSize: pageSize.value
	}
	let res = await Api.notice.getNoticeList.post(params)
	if (res.code == 200) {
		tableData.value = res.dataList
		tableRows.value = res.rows
	}
	let countRes = await flowApi.task.countBizItemData.post()
	if (countRes.code == 200) {
		countData.value = countRes.data
	}

}
const rowClick = async (val) => {
	id.value = val
	let res = await Api.notice.detail.post({
		id: val.id
	});
	if (res.code == '200') {
		form.value = res.data
		dialogVisible.value = true
	}
}
const readInfo = async () => {
	let res = await Api.notice.read.post(id.value)
	if (res.code == 200) {
		dialogVisible.value = false
		getInit()
	}
}
const pageChange = (val) => {
	pageNo.value = val;
	getInit()
}
const handleSizeChange = (val) => {
	pageSize.value = val
	getInit()
}
const getTripPlans = async (val) => {
	let res = await authApi.countEmployeeTripPlans.post({
		startDate: val
	})
	if (res.code == 200) {
		tripList.value = res.dataList
	}
}
const getCountSample = async (val) => {
	if (val !== 'month') {
		select.value = false
	}
	let res = await authApi.countSampleAuditTableNum.post({
		dateSegmentKind: val
	})
	if (res.code == 200) {
		option.xAxis.data = res.dataList.map(obj => {
			return obj.label
		})
		option.series[0].data = res.dataList.map(obj => {
			return obj.num
		})
	}

}
</script>


<style lang="less" scoped>
.header {
	display: flex;
	flex-direction: column;
}

.subTitle {
	font-size: 15px;
	font-weight: 400;
	text-align: center;
}

:deep(.el-dialog__body) {
	padding-top: 0px;
}

.top-card {
	position: relative;
	height: 100px !important;
	font-size: 14px;
}

.top-card p {
	font-size: 20px;
	margin: 14px 0px 14px 0px;
}

.top-card .right-icon {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	// color: var(--el-color-primary);	
	text-align: center;
	// background: var(--el-color-primary-light-9);
	border-radius: 50%;
	transform: translateY(-50%)
}

.top-card .right-icon i {
	font-size: 35px
}

.top-card .bottom .ri-arrow-up-line {
	width: 18px;
	height: 18px;
	margin: 0 3px 0 2px;
	// color: var(--el-color-success);
	vertical-align: -3.5px !important;
	// background: var(--el-color-success-light);
	border-radius: 50%;
	transform: scale(.8)
}

.top-card .bottom span {
	color: var(--el-color-success)
}

.top-card-blue {
	color: #fff;
	background: var(--el-color-primary);
	background: linear-gradient(90deg, #409effde, #409eff75)
}

.top-card-orange {
	color: #fff;
	background: linear-gradient(90deg, #ffa545, #ff9d4561)
}

.top-card-green {
	color: #fff;
	background: linear-gradient(to left, #ff89859c, #FF7886, #FF6486);
}

.top-card-purple {
	color: #fff;
	background: linear-gradient(90deg, #cd45ffe8, #cf45ff69)
}

.top-card-blue .bottom .ri-arrow-up-line {
	color: var(--el-color-primary);
	background: transparent;
	background: var(--el-color-primary-light-9);
	transform: scale(.8)
}

.top-card-blue .bottom span {
	color: #fff
}

.ri {
	display: inline-block;
	font-size: 16px;
	text-align: center;
	vertical-align: -3.5px;
}

:deep(.el-calendar) {
	--el-calendar-selected-bg-color: #ffffff;
}

:deep(.el-calendar-table .el-calendar-day) {
	height: 37px;
	padding-top: 0px;
}

:deep(.el-calendar-day) {
	position: relative;
	// background-color: v-bind(dayColor);
}

.back {
	background-color: #ebf5ff;
}

:deep(.el-calendar__header) {
	padding-top: 0px;
}

.header {
	border-bottom: 0;
	font-size: 18px;
	font-weight: bold;
	padding: 0px 5px 15px 5px;
}

.button-active {
	color: var(--el-button-hover-text-color);
	border-color: var(--el-button-hover-border-color);
	background-color: var(--el-button-hover-bg-color);
}</style>
